{% extends "base.html" %}

{% block title %}服务更新{% endblock %}

{% block head %}
{{ super() }}
<!-- bootstrap-select -->
<link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    新建服务
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/job">工单审批</a></li>
    <li><a href="/job/type">新建工单</a></li>
    <li class="active">新建服务</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-md-12">

      <!-- 一般表单 -->
      <div class="box ">
        <div class="box-header with-border">
          <h3 class="box-title">填写服务详情</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form" id="form" class="form-horizontal">
          <div class="box-body">

            <div class="form-group">
              <label for="area" class="col-sm-3 control-label"><span style="color: red">*</span> 区域 / 项目</label>
              <div class="col-sm-9">
                <select class="form-control" id="area">
                  <option value="">--请选择--</option>
                  <!--                  <option value="">否</option>-->
                  <!--                  <option value="yes">是</option>-->
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="job_name" class="col-sm-3 control-label"><span style="color: red">*</span> Jenkins Job名 / K8s
                应用名</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="job_name" name="job_name" required>
              </div>
            </div>
            <div class="form-group">
              <label for="job_desc" class="col-sm-3 control-label"><span style="color: red">*</span> Jenkins Job描述</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="job_desc" name="job_desc" required>
              </div>
            </div>
            <div class="form-group">
              <label for="code_repo" class="col-sm-3 control-label"><span style="color: red">*</span> Gitlab
                代码仓库</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="code_repo" name="code_repo" required>
              </div>
            </div>
            <!--            <div class="form-group">-->
            <!--              <label for="conf_repo" class="col-sm-3 control-label">Gitlab 配置仓库</label>-->
            <!--              <div class="col-sm-9">-->
            <!--              <input type="text" class="form-control" id="conf_repo" name="conf_repo" disabled-->
            <!--                     value="https://gitlab2.cspiretech.com/ops/Jenkins-repo.git">-->
            <!--              </div>-->
            <!--            </div>-->
            <div class="form-group">
              <label for="jenkins_kube_info" class="col-sm-3 control-label"><span style="color: red">*</span> K8s 集群</label>
              <div class="col-sm-9">
                <select class="form-control" id="jenkins_kube_info">
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="cluster_ns" class="col-sm-3 control-label"><span style="color: red">*</span> K8s 命名空间</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="cluster_ns" name="cluster_ns" required>
              </div>
            </div>
            <!--            <div class="form-group">-->
            <!--              <label for="app_name" class="col-sm-3 control-label"><span style="color: red">*</span> K8s 应用名</label>-->
            <!--              <input type="text" class="form-control" id="app_name" name="app_name" required>-->
            <!--            </div>-->
            <div class="form-group">
              <label for="node_port" class="col-sm-3 control-label"><span style="color: red">*</span> K8s 端口号</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="node_port" name="node_port" required>
              </div>
            </div>
            <div class="form-group">
              <label for="image" class="col-sm-3 control-label"><span style="color: red">*</span> K8s 镜像</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="image" name="image" required>
              </div>
            </div>
            <div class="form-group">
              <label for="pre_cd" class="col-sm-3 control-label">预发环境自动部署</label>
              <div class="col-sm-9">
                <select class="form-control" id="pre_cd">
                  <option value="no">否</option>
                  <option value="yes">是</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">编程语言</label>
              <div class="col-sm-9">
                <select class="form-control" id="build_tool">
                  <option value="maven">JAVA - Maven</option>
                  <option value="npm">NodeJS - Npm</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">内存规格</label>
              <div class="col-sm-9">
                <select class="form-control" id="tier">
                  <option value="0.5">0.5G内存</option>
                  <option value="1">1G内存</option>
                  <option value="2">2G内存</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">兼容arm64</label>
              <div class="col-sm-9">
                <select class="form-control" id="include_arm64">
                  <option value="">否</option>
                  <option value="yes">是</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-9">
                <!--                <button type="submit" class="btn btn-default">Sign in</button>-->
                <button type="button" class="btn btn-warning" id="submitBtn">提交</button>
              </div>
            </div>


          </div>
          <!-- /.box-body -->

          <!--          <div class="box-footer">-->
          <!--            <button type="button" class="btn btn-warning" id="submitBtn">提交</button>&nbsp;&nbsp;&nbsp;-->
          <!--          </div>-->
        </form>
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->

{% endblock %}

{% block script %}

<script src="/static/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
    // 提交按钮
    $('#submitBtn').click(function (e) {
        e.preventDefault()
        let job_name = $('#job_name').val()
        let job_desc = $('#job_desc').val()
        let code_repo = $('#code_repo').val()
        let conf_repo = "https://gitlab2.cspiretech.com/ops/Jenkins-repo.git"
        let kube_id = $('#jenkins_kube_info').val()
        let cluster_ns = $('#cluster_ns').val()
        let app_name = $('#job_name').val()
        let node_port = $('#node_port').val()
        let image = $('#image').val()
        let pre_cd = $('#pre_cd').val()
        if (pre_cd == "yes") {
            pre_cd = true
        } else {
            pre_cd = false
        }
        let build_tool = $('#build_tool').val()
        let tier = $('#tier').val()
        let include_arm64 = $('#include_arm64').val()
        if (include_arm64) {
            include_arm64 = true
        } else {
            include_arm64 = false
        }

        // 数据有效性校验
        if (job_name == '' || job_desc == '' || code_repo == '' || kube_id == '' || cluster_ns == '' || app_name == '' || node_port == '' || image == '') {
            bootbox.alert("有未填写的参数，请返回检查")
            return false
        }

        var data = {
            job_name: job_name,
            job_desc: job_desc,
            code_repo: code_repo,
            conf_repo: conf_repo,
            kube_id: kube_id,
            cluster_ns: cluster_ns,
            app_name: app_name,
            node_port: node_port,
            image: image,
            pre_cd: pre_cd,
            build_tool: build_tool,
            tier: tier,
            include_arm64: include_arm64,
        }

        $.ajax({
            method: 'POST',
            url: '/api/v1/job/type-2/add',
            data: JSON.stringify(data),
            dataType: 'text',
            headers: {'Content-Type': 'application/json; charset=utf-8'},
            success: function (result) {
                bootbox.alert(result, function () {
                    if (result === 'success') {
                        setTimeout(function () {
                            location.href = '/job'
                        }, 250);
                    }
                });

            }
        })
    });

    // 区域下拉选择变化，同步更新kube_info下拉框
    $('#area').change(function () {
        let ared_id = $('#area').val()
        $.ajax({
            method: 'GET',
            url: `/api/v1/kube_info_list?area_id=${ared_id}`,
            success: function (result) {
                console.log(result)
                $('#jenkins_kube_info').find('option').remove()
                $('#jenkins_kube_info').append(`<option value="">--请选择--</option>`)
                for (let i = 0; i < result.data.length; i++) {
                    let kube_id = result.data[i].kube_id
                    let cluster_name = result.data[i].cluster_name
                    $('#jenkins_kube_info').append(`<option value="${kube_id}">${cluster_name}</option>`)
                }
            }
        })
    })

    // K8s集群下拉框选择变化，判断是否存在kube_id，不存在则禁用预发环境自动部署
    $('#jenkins_kube_info').change(function () {
        let kube_id = $('#jenkins_kube_info').val()
        console.log(kube_id)
        if (kube_id == 'null' || kube_id == "") {
            $('#pre_cd').attr('disabled', 'disabled')
            $('#pre_cd').val("no")
        }
        else {
            $('#pre_cd').removeAttr('disabled')
        }
    })


    $(function () {
        console.log("ready")
        $.ajax({
            method: 'GET',
            url: '/api/v1/area_list',
            success: function (result) {
                console.log(result)
                for (let i = 0; i < result.data.length; i++) {
                    let area_id = result.data[i].id
                    let area_name = result.data[i].name
                    $('#area').append(`<option value="${area_id}">${area_name}</option>`)
                }
            }
        })


    })


</script>
{% endblock %}